<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="用户线索">
        <div class="filter-container">
          <el-select
            v-model="listQuery.isLaunch"
            clearable
            placeholder="状态"
            style="width: 150px;"
            class="filter-item"
          >
            <el-option :value="0" label="认证未推送">认证未推送</el-option>
            <el-option :value="2" label="撞库未推送">撞库未推送</el-option>
            <el-option :value="1" label="推送成功">推送成功</el-option>
            <el-option :value="3" label="推送成功(补量)"
              >推送成功(补量)</el-option
            >
            <el-option :value="4" label="匹配失败">匹配失败</el-option>
            <el-option :value="5" label="推送成功(高质量)"
              >推送成功(高质量)</el-option
            >
            <el-option :value="6" label="推送成功(非时段)"
              >推送成功(非时段)</el-option
            >
            <el-option :value="7" label="推送成功(自动高质量)"
              >推送成功(自动高质量)</el-option
            >
            <el-option :value="8" label="推送成功(自动非时段)"
              >推送成功(自动非时段)</el-option
            >
          </el-select>
          <el-select
            v-model="listQuery.channelIdSource"
            filterable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-option
              v-for="item in selectArr"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select>
          <el-input
            v-model="listQuery.name"
            placeholder="姓名"
            style="width: 100px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.channel"
            placeholder="机构名称"
            style="width: 100px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.belonging"
            placeholder="地区"
            style="width: 100px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-date-picker
            v-model="times"
            class="filter-item"
            start-placeholder="提交开始时间"
            end-placeholder="提交结束时间"
            style="width: 250px;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-date-picker
            v-model="times1"
            class="filter-item"
            start-placeholder="投放开始时间"
            end-placeholder="投放结束时间"
            style="width: 250px;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="exportList"
          >
            导出
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="渠道来源" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.channelSource }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" class-name="status-col" width="150">
            <template slot-scope="{ row }">
              {{ row.phone }}
            </template>
          </el-table-column>
          <el-table-column label="提交时间" min-width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.creatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="投放时间" min-width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.putTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="注册IP" min-width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.registerIp }}</span>
            </template>
          </el-table-column>
          <el-table-column label="归属地" min-width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.belonging }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最后登录IP" min-width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.finalIp }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信息" width="150" align="center">
            <template slot-scope="{ row }">
              <span style="color:blue" @click="analyse(row)">线索分析</span>
            </template>
          </el-table-column>
          <el-table-column label="匹配展示机构" align="center" width="220">
            <template slot-scope="{ row }">
              <span>{{ row.mechanismName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投放状态"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.isLaunch == 0">认证未推送</el-tag>
              <el-tag v-if="row.isLaunch == 2">撞库未推送</el-tag>
              <el-tag v-if="row.isLaunch == 1">推送成功</el-tag>
              <el-tag v-if="row.isLaunch == 3">推送成功(补量)</el-tag>
              <el-tag v-if="row.isLaunch == 4">匹配失败</el-tag>
              <el-tag v-if="row.isLaunch == 5">推送成功(高质量)</el-tag>
              <el-tag v-if="row.isLaunch == 6">推送成功(非时段)</el-tag>
              <el-tag v-if="row.isLaunch == 7">推送成功(自动高质量)</el-tag>
              <el-tag v-if="row.isLaunch == 8">推送成功(自动非时段)</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="投放类型"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.type == 0">未投放</el-tag>
              <el-tag v-if="row.type == 1">crm</el-tag>
              <el-tag v-if="row.type == 2">保险</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="投放机构名称"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <span>{{ row.channel }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
              label="机构名称"
              align="center"
              min-width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <span>{{ row.insuranceProductsName }}</span>
              </template>
            </el-table-column> -->
          <el-table-column label="签署协议" min-width="100" align="center">
            <template slot-scope="{ row }">
              <span style="color:blue" @click="showXy(row)">协议</span>
            </template>
          </el-table-column>
          <el-table-column label="行为日志" width="150" align="center">
            <template slot-scope="{ row }">
              <span style="color:blue" @click="look(row)">查看</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
              label="沟通进展"
              align="center"
              min-width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <span>{{ row.schedules }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="描述信息"
              align="center"
              min-width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <span>{{ row.describes }}</span>
              </template>
            </el-table-column> -->
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="getChannelDevice"
        />
      </el-tab-pane>
      <el-tab-pane label="推送线索">
        <div class="filter-container">
          <el-input
            v-model="listQuery1.name"
            placeholder="姓名"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery1.channel"
            placeholder="投放名称"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-date-picker
            v-model="times"
            class="filter-item"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 250px;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="姓名" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" class-name="status-col" width="150">
            <template slot-scope="{ row }">
              {{ row.userPhone }}
            </template>
          </el-table-column>
          <el-table-column label="提交时间" min-width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信息" width="150" align="center">
            <template slot-scope="{ row }">
              <span style="color:blue" @click="analyse1(row)">线索分析</span>
            </template>
          </el-table-column>
          <el-table-column label="匹配展示机构" align="center" width="220">
            <template slot-scope="{ row }">
              <span>{{ row.releaseName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投放类型"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.type == 0">未投放</el-tag>
              <el-tag v-if="row.type == 1">crm</el-tag>
              <el-tag v-if="row.type == 2">保险</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="投放名称"
            align="center"
            min-width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <span>{{ row.releaseName }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery1.current"
          :limit.sync="listQuery1.size"
          @pagination="getSecondList"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="dialogPvVisible" title="线索分析">
      <div style="display:flex">
        <div>
          <el-form ref="clueData" :model="clueData" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="clueData.name" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <!-- <el-input v-model="clueData.sex" readonly></el-input> -->
              <el-input
                v-show="clueData.sex == 1"
                v-model="nan"
                readonly
              ></el-input>
              <el-input
                v-show="clueData.sex == 2"
                v-model="nv"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="clueData.age" readonly></el-input>
            </el-form-item>
            <el-form-item label="借多少">
              <el-input v-model="clueData.newLoanLimit" readonly></el-input>
            </el-form-item>
            <el-form-item label="省份">
              <el-input v-model="clueData.province" readonly></el-input>
            </el-form-item>
            <el-form-item label="城市">
              <el-input v-model="clueData.city" readonly></el-input>
            </el-form-item>
            <el-form-item label="芝麻分">
              <el-input v-model="clueData.newSesameSeed" readonly></el-input>
            </el-form-item>
            <el-form-item label="学历">
              <el-input v-model="clueData.education" readonly></el-input>
            </el-form-item>
            <el-form-item label="逾期">
              <el-input v-model="clueData.overdueSituation" readonly></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div>
          <el-form ref="clueData" :model="clueData" label-width="100px">
            <el-form-item label="职业">
              <el-input v-model="clueData.occupation" readonly></el-input>
            </el-form-item>
            <el-form-item label="社保缴纳">
              <el-input v-model="clueData.socialSecurity" readonly></el-input>
            </el-form-item>
            <el-form-item label="公积金">
              <el-input v-model="clueData.accumulation" readonly></el-input>
            </el-form-item>
            <el-form-item label="投保">
              <el-input v-model="clueData.insurance" readonly></el-input>
            </el-form-item>
            <el-form-item label="车产">
              <el-input v-model="clueData.car" readonly></el-input>
            </el-form-item>
            <el-form-item label="房产">
              <el-input v-model="clueData.house" readonly></el-input>
            </el-form-item>
            <el-form-item label="信用卡">
              <el-input v-model="clueData.creditCard" readonly></el-input>
            </el-form-item>
            <el-form-item label="花呗">
              <el-input v-model="clueData.huabei" readonly></el-input>
            </el-form-item>
            <el-form-item label="白条">
              <el-input v-model="clueData.whiteStripe" readonly></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="lookDialogVisible"
      title="行为日志"
      :before-close="closeLook"
    >
      <el-form ref="actionData" :model="actionData" label-width="100px">
        <el-form-item label="注册时间">
          <el-input v-model="actionData.registerTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="注册渠道">
          <el-input v-model="actionData.registerChannel" readonly></el-input>
        </el-form-item>
        <el-form-item label="表单填写进度">
          <div v-for="item in progress" :key="item.key" style="margin:1px">
            {{ item }}
          </div>
        </el-form-item>
        <el-form-item label="匹配机构">
          <el-input v-model="actionData.mateInstitution" readonly></el-input>
        </el-form-item>
        <el-form-item label="推送记录">
          <el-tag
            v-for="item in actionData.pushLog"
            :key="item.key"
            :type="primary"
            effect="plain"
            style="margin:1px;width:50%"
          >
            {{ item }}</el-tag
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeLook()">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" title="协议">
      <el-table :data="xyData" style="width: 100%">
        <el-table-column label="签署协议" min-width="200" align="center">
          <template slot-scope="{ row }">
            <!-- <span v-if="row.type == 1" @click="open(row)">贷款知情书</span>
              <span v-if="row.type == 2" @click="open(row)">机构协议</span>
              <span v-if="row.type == 3" @click="open(row)"
                >个人信息共享授权书</span> -->
            <span v-if="row.type == 19" @click="open(row)">机构协议</span>
            <span v-if="row.type == 20" @click="open(row)">贷款知情书</span>
            <span v-if="row.type == 21" @click="open(row)"
              >个人信息共享授权书</span
            >
            <span v-if="row.type == 22" @click="open(row)">助贷服务协议</span>
            <span v-if="row.type == 23" @click="open(row)">个人信息授权书</span>
            <span v-if="row.type == 24" @click="open(row)"
              >用户注册服务协议</span
            >
            <span v-if="row.type == 25" @click="open(row)"
              >隐私信息授权协议</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="50%"
        title="协议内容"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div v-html="htmlContent" />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  authList,
  getbyId,
  showXy,
  showXyContent,
  pushLeadsList,
  getClueByUserId,
  getChannelSourceBySource,
  getUserActionLog
} from '@/api/advertising';
import { getChannelIdAndNick } from '@/api/user';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      countPhone: { total: 999 },
      actionData: {},
      progress: [],
      tableData: [],
      total: 0,
      nan: '男',
      nv: '女',
      tableKey: 0,
      selectArr: [],
      listQuery: {
        channel: '',
        listQuery: '',
        current: 1,
        endTime: '',
        name: '',
        size: 10,
        startTime: '',
        isLaunch: '',
        leadingOut: 0,
        source: '',
        channelIdSource: '',
        putStartTime: '',
        putEndTime: ''
      },
      listQuery1: {
        channel: '',
        current: 1,
        endTime: '',
        name: '',
        size: 10,
        startTime: '',
        putStartTime: '',
        putEndTime: ''
      },
      times: [],
      times1: [],
      dialogFormVisible: false,
      dialogVisible: false,
      dialogStatus: '',
      clueData: {},
      lookDialogVisible: false,
      downloadLoading: false,
      listLoading: false,
      dialogPvVisible: false,
      innerVisible: false,
      xyData: [],
      htmlContent: '',
      mechanismName: [],
      tabActive: '0'
    };
  },
  created() {
    this.getChannelDevice(this.listQuery);
    this.getChannelIdAndNick(this.listQuery);
  },
  methods: {
    handleClick(tab) {
      this.tabActive = tab.index;
      this.handleFilter();
    },
    async open(row) {
      this.innerVisible = true;
      const res1 = await showXyContent({ id: row.id });
      this.htmlContent = res1.data.data.typeContent;
    },
    async showXy(row) {
      this.dialogVisible = true;
      const res = await showXy({ userId: row.userId });
      if (res.data.code === 200) {
        this.xyData = res.data.data;
      }
    },
    // 获取渠道来源列表数据
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.selectArr.push(element);
        }
      });
    },

    async getArr() {
      const res = await getChannelSourceBySource({
        source: this.listQuery.source
      });
      this.selectArr = res.data.data;
      this.listQuery.channelSource = '';
    },
    // 获取用户列表
    async getChannelDevice(listQuery) {
      const res = await authList(this.listQuery);
      if (res.data.code == 200) {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      } else {
        this.$notify({
          title: '错误',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        });
      }
    },
    async getSecondList(listQuery) {
      const res = await pushLeadsList(this.listQuery1);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    async analyse(row) {
      this.dialogPvVisible = true;
      const res = await getbyId({ id: row.id });
      this.clueData = res.data.data;
    },
    async analyse1(row) {
      this.dialogPvVisible = true;
      const res = await getClueByUserId({ userId: row.userId });
      this.clueData = res.data.data;
    },
    async look(row) {
      this.lookDialogVisible = true;
      const res = await getUserActionLog({ userId: row.userId });
      if (res.data.data) {
        this.actionData = res.data.data;
        this.progress = this.actionData.formFullProgress.split(',');
      }
      console.log(this.actionData);
    },
    closeLook() {
      this.lookDialogVisible = false;
      this.actionData = {};
      this.progress = [];
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.listQuery1.current = 1;
      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
        this.listQuery1.endTime = '';
        this.listQuery1.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
        this.listQuery1.endTime = '';
        this.listQuery1.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
        this.listQuery1.endTime = this.times[1];
        this.listQuery1.startTime = this.times[0];
      }
      if (this.times1 == null) {
        this.listQuery.putEndTime = '';
        this.listQuery.putStartTime = '';
        this.listQuery1.putEndTime = '';
        this.listQuery1.putStartTime = '';
      } else if (this.times1.length === 0) {
        this.listQuery.putEndTime = '';
        this.listQuery.putStartTime = '';
        this.listQuery1.putEndTime = '';
        this.listQuery1.putStartTime = '';
      } else {
        this.listQuery.putEndTime = this.times1[1];
        this.listQuery.putStartTime = this.times1[0];
        this.listQuery1.putEndTime = this.times1[1];
        this.listQuery1.putStartTime = this.times1[0];
      }
      if (this.tabActive === '0') {
        this.getChannelDevice(this.listQuery);
      } else if (this.tabActive === '1') {
        this.getSecondList(this.listQuery1);
      }
    },
    exportList() {
      this.listQuery.leadingOut = 1;
      authList(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data;
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
        this.listQuery.leadingOut = 0;
      });
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}

.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}

.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}

.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}

.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(172, 176, 177);
}

.title {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}

.box {
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}

.nick {
  font-size: 30px;
  font-weight: 600;
}

.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}

.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
